<div class="nav nav-light flex-column">
    <div class="nav-item">
        <a class="nav-link" [class.active]="isEmpty()" (click)="tagsReset.emit()"> {{ "common.tagsAll" | sqxTranslate }} </a>
    </div>

    @for (tag of tags; track tag.name) {
        <div class="nav-item">
            <a class="nav-link" [class.active]="isSelected(tag)" (click)="toggle.emit(tag.name)">
                <div class="row g-0">
                    <div class="col">
                        <span class="truncate">{{ tag.name }}</span>
                    </div>

                    <div class="col-auto">
                        <div class="badge badge-secondary rounded-pill">{{ tag.count }}</div>

                        @if (canRename) {
                            <a class="btn-sm btn-text-secondary btn-rename" (click)="renameTag(tag)" sqxStopClick>
                                <i class="icon-pencil"></i>
                            </a>
                        }
                    </div>
                </div>
            </a>
        </div>
    }
</div>
<sqx-asset-tag-dialog (dialogClose)="tagRenameDialog.hide()" *sqxModal="tagRenameDialog" [tagName]="tagRenaming!.name" />
